<!--
 * @Author: 郑灶欣
 * @Date: 2023-02-06 13:38:19
 * @LastEditors: 郑灶欣
 * @LastEditTime: 2023-02-24 16:56:43
 * @FilePath: \office\src\components\header.vue
 * @Description: 
-->
<template>
  <div>
    <div id="header" class="header">
      <div style="margin-left:10vw">{{$t('message.WQClass')}}</div>
      <div class="right-pc">
        <a>{{$t('message.AboutOurs')}}</a>
        <a>{{$t('message.WeProduct')}}</a>
        <a>{{$t('message.News')}}</a>
        <a>{{$t('message.JoinIn')}}</a>
      </div>
      <div class="right-mobile " @click="showMenuList=!showMenuList">
        <span class="menu icon"></span>
      </div>
    </div>
    <div v-show="showMenuList" class="menu-list">
      <a>{{$t('message.AboutOurs')}}</a>
      <a>{{$t('message.WeProduct')}}</a>
      <a>{{$t('message.News')}}</a>
      <a>{{$t('message.JoinIn')}}</a>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
//手机菜单显示
let showMenuList = ref(false);
let oldScrollTop = 0;
// 监听页面滚动
window.addEventListener("scroll", (res) => {
  let scrollTop =
    window.pageYOffset ||
    document.documentElement.scrollTop ||
    document.body.scrollTop;
  if (scrollTop - oldScrollTop > 200) {
    //向下滚动
    oldScrollTop = scrollTop;
    document.getElementById("header").style.visibility = "hidden";
    showMenuList.value = false;
  } else if (scrollTop - oldScrollTop < -200) {
    //向上滚动
    oldScrollTop = scrollTop;
    document.getElementById("header").style.visibility = "visible";
  }
});
//sdfklsj f
</script>

<style lang="scss" scoped>
.menu.icon {
  color: #000;
  position: absolute;
  width: 17px;
  height: 1px;
  background-color:  $white-color;
}

.menu.icon:before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 17px;
  height: 1px;
  background-color: $white-color;
}

.menu.icon:after {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 17px;
  height: 1px;
  background-color: $white-color;
}

.header {
  width: 100%;
  height: 10vh;
  display: flex;
  position: fixed;
  top: 0;

  flex-direction: row;
  align-items: center;
  z-index: 999;
  color: $white-color;
  background-color: $bg-color;
  justify-content: space-between;
  .right-pc {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 5vw;
    a {
      width: 120px;
      cursor: pointer;
    }
    a:hover {
      color: #f0f0f0;
    }
  }
  .right-mobile {
    cursor: pointer;
    margin-right: 10vw;
  }
}
@media screen and (min-width: 750px) {
  .right-mobile {
    display: none !important;
  }
  .menu-list {
    display: none !important;
  }
}
@media screen and (max-width: 750px) {
  .right-pc {
    display: none !important;
  }
  .menu-list {
    display: block;
    position: fixed;
    top: 10vh;
    width: 100%;
    background: $white-color;
    z-index: 999;
    display: flex;
  
    flex-direction: column;
    a {
      padding: 8px;
      text-align: center;
      border-bottom: 1px solid #e5e5e5;
    }
  }
}
</style>